<template>
	<view class="border-bottom-1 pb-30 pt-30 y-flex" :class="{'page-padding-gap': paddingShow}" :style="{'border-bottom-color': skinColor.color_gap_1}">
		<view class="y-flex y-row y-align-center mb-20">
			<text class="fs-24 fr-error" v-if="required">*</text>
			<text class="fs-28 y-flex-1" :style="{color: skinColor.color_1}">{{label}}</text>
			<com-icon name="close" size="35" :color="skinColor.color_3" v-if="closeable && !disabled" @click="handleClose"></com-icon>
		</view>
		<view class="y-flex y-row y-align-center" v-if="['text', 'number', 'icon', 'color', 'rule', 'image', 'auto', 'url'].includes(type)">
			<com-logo v-if="valueSync && type == 'icon'" class="mr-20" size="50" :src="valueSync" :color="skinColor.color_1"></com-logo>
			<image class="mr-20" :src="valueSync" mode="aspectFill" style="width: 50rpx;height: 50rpx;" v-if="valueSync && type == 'image'"></image>
			<view v-if="type == 'color' && valueSync" class="border-1 border-color-999 mr-20" :style="{'width': '50rpx', 'height': '50rpx', 'background-color': valueSync}"></view>
			<input class="fs-30 y-flex-1" :style="{color: skinColor.color_1, 'min-height': '60rpx'}"
			:type="['number','text'].includes(type) ? type : 'text'" :disabled="disabled" :placeholder="'输入' + label" :value="valueSync" @input="handleInput">
			<com-icon class="ml-20" :disabled="disabled" name="round_close_fill" size="40" :color="skinColor.color_gap_1" v-if="valueSync" @click="clearValue"></com-icon>
			<com-icon :disabled="disabled" class="ml-20" name="emoji" :color="skinColor.color_2" size="50rpx" v-if="type == 'icon'" @click="handleIconSelect"></com-icon>
		</view>
		<view class="y-flex y-row y-align-center" v-if="type == 'back'">
			<image class="mr-20" :src="valueSync" mode="aspectFill" style="width: 50rpx;height: 50rpx;" v-if="valueSync && valueSync.startsWith('http')"></image>
			<view v-if="valueSync && (valueSync.startsWith('#') || valueSync.startsWith('rgb'))" class="border-1 border-color-999 mr-20" :style="{'width': '50rpx', 'height': '50rpx', 'background-color': valueSync}"></view>
			<input class="fs-30 y-flex-1" :style="{color: skinColor.color_1, 'min-height': '60rpx'}"
			type="text" :disabled="disabled" :placeholder="'输入' + label" :value="valueSync" @input="handleInput">
			<com-icon class="ml-20" :disabled="disabled" name="round_close_fill" size="40" :color="skinColor.color_gap_1" v-if="valueSync" @click="clearValue"></com-icon>
		</view>
		<view class="y-flex y-row y-align-center" v-if="type == 'boolean'">
			<view class="y-flex y-row y-align-center" @tap="handleBooleanSelect(0)">
				<com-icon size="40rpx" :name="valueSync == 0 ? 'radio_box' : 'round'" :color="valueSync == 0 ? skinColor.color_blue : skinColor.color_3"></com-icon>
				<text class="fs-32 ml-10" :style="{color: skinColor.color_1}">否</text>
			</view>
			<view class="y-flex y-row y-align-center ml-40" @tap="handleBooleanSelect(1)">
				<com-icon size="40rpx" :name="valueSync == 1 ? 'radio_box' : 'round'" :color="valueSync == 1 ? skinColor.color_blue : skinColor.color_3"></com-icon>
				<text class="fs-32 ml-10" :style="{color: skinColor.color_1}">是</text>
			</view>
		</view>
		<view class="y-flex y-row y-align-center" v-if="type == 'textarea'">
			<textarea
			class="form-item-textarea fs-30 y-flex-1"
			:disabled="disabled"
			:style="{'color': skinColor.color_1}"
			:placeholder="'输入' + label"
			:placeholder-style="'color:' + skinColor.color_3"
			:maxlength="-1"
			auto-height :value="valueSync" @input="handleInput"></textarea>
			<com-icon class="ml-20" v-if="valueSync" :disabled="disabled" name="round_close_fill" size="40" :color="skinColor.color_gap_1" @click="clearValue"></com-icon>
		</view>
		<view class="y-flex y-row y-align-center y-wrap" v-if="typeof type == 'object'">
			<view class="y-flex y-row y-align-center mr-20 mt-20" @tap="handleOptionsSelect(item)" v-for="(item,index) in type" :key="index">
				<com-icon size="40rpx" :name="valueSync == item ? 'radio_box' : 'round'" :color="valueSync == item ? skinColor.color_blue : skinColor.color_3"></com-icon>
				<text class="fs-32 ml-10" :style="{color: skinColor.color_1}">{{item}}</text>
			</view>
		</view>
		<com-number-box v-if="type == '0-1'" style="width: 240rpx;" :disabled="disabled" :step="0.1" :min="0" :max="1" :value="valueSync" @input="handleNumberInput"></com-number-box>
		<!-- <view class="y-flex y-row y-align-center" v-if="type == 'object'">
			<input ref="objectInput" class="fs-30 y-flex-1" :style="{color: skinColor.color_1, 'min-height': '60rpx'}"
			type="text" :disabled="disabled" :placeholder="'输入' + label" :value="objectToString(valueSync)" @blur="handleObjectInput">
			<com-icon class="ml-20" :disabled="disabled" name="round_close_fill" size="40" :color="skinColor.color_gap_1" v-if="objectToString(valueSync)" @click="clearObjectValue"></com-icon>
			<com-icon class="ml-20" :disabled="disabled" name="round_pay" size="40" :color="skinColor.color_1" @click="$refs.objectInput.blur()"></com-icon>
		</view> -->
		<view class="y-flex y-row y-align-center" v-if="['object', 'array'].includes(type)">
			<input ref="objectInput" class="fs-30 y-flex-1" :style="{color: skinColor.color_1, 'min-height': '60rpx'}"
			type="text" :disabled="disabled" :placeholder="'输入' + label" :value="valueSync" @input="handleObjectInput">
			<com-icon class="ml-20" :disabled="disabled" name="round_close_fill" size="40" :color="skinColor.color_gap_1" v-if="valueSync" @click="clearValue"></com-icon>
		</view>
		<view class="y-flex y-row y-align-center" v-if="type == 'none'">
			<text class="fs-30 y-flex-1">{{valueSync}}</text>
		</view>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	export default {
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: [String, Array],
				default: ''
			},
			label: {
				type: String,
				default: ''
			},
			required: {
				type: [Boolean, Number],
				default: false
			},
			disabled: {
				type: [Boolean, Number],
				default: false
			},
			closeable: {
				type: [Boolean, Number],
				default: false
			},
			paddingShow: {
				type: [Boolean, Number],
				default: true
			}
		},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			}
		},
		data () {
			return {
				valueSync: ''
			}
		},
		created() {
			this.valueSync = this.value
		},
		methods: {
			clearValue () {
				if ( this.disabled ) return
				this.valueSync = ''
				this.$emit('input', this.valueSync)
			},
			handleIconSelect () {
				if ( this.disabled ) return
				this.$emit('selectIcon')
			},
			handleClose () {
				if ( this.disabled ) return
				this.$emit('close')
			},
			handleBooleanSelect (value) {
				if ( this.disabled ) return
				this.valueSync = value
				this.$emit('input', this.valueSync)
			},
			handleInput (e) {
				if ( this.type == 'auto' ) this.valueSync = e.detail.value.match(/\d+/) ? parseInt(e.detail.value) : e.detail.valueSync
				else this.valueSync = e.detail.value
				this.$emit('input', this.valueSync)
			},
			handleOptionsSelect (item) {
				if ( this.disabled ) return
				this.valueSync = item
				this.$emit('input', this.valueSync)
			},
			handleNumberInput (value) {
				this.valueSync = value
				this.$emit('input', this.valueSync)
			},
			handleObjectInput (e) {
				const value = e.detail.value
				try{
					this.valueSync = JSON.parse(value)
				}catch(e){
					this.valueSync = value
				}
				this.$emit('input', this.valueSync)
				// const value = e.detail.value
				// if ( value ) {
				// 	const arr = value.split('&&&')
				// 	const object = {}
				// 	arr.forEach(item => {
				// 		const args = item.split('===')
				// 		object[args[0]] = args[1]
				// 	})
				// 	this.valueSync = object
				// 	this.$emit('input', this.valueSync)
				// }
			},
			objectToString (object) {
				let str = ''
				const keys = Object.keys(object)
				keys.forEach((key, i) => {
					str += key + '===' + object[key] + (i < keys.length -1 ? '&&&' : '')
				})
				return str
			},
			clearObjectValue () {
				this.valueSync = {}
				this.$emit('input', this.valueSync)
			}
		},
		watch: {
			value (newVal) {
				this.valueSync = newVal
			}
		}
	}
</script>

<style>
	.form-item-textarea {
		min-height: 80rpx;
		max-height: 400rpx;
		border-radius: 90rpx;
	}
</style>